<template>
  <el-dialog v-model="dialogVisible" :title="htmlTitle" width="360px">
    <el-table ref="refTable" :data="tableData" style="width: 100%;" max-height="180" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" :label="htmlLabelName" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ htmlBtnCancel }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ htmlBtnConfirm }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import LunchService from "@/service/LunchService"

export default {
  name: 'LunchSysMenu',
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      selectedMenus: [],
      htmlTitle: chrome.i18n.getMessage('lunchContentSysMenuTitle'),
      htmlLabelName: chrome.i18n.getMessage('commonLabelName'),
      htmlBtnCancel: chrome.i18n.getMessage('commonBtnCancel'),
      htmlBtnConfirm: chrome.i18n.getMessage('commonBtnConfirm')
    }
  },
  methods: {
    /**
     * 显示.
     */
    show() {
      this.tableData = LunchService.getSysMenus()
      console.log('load sys menu: ', this.tableData)
      this.dialogVisible = true
    },
    /**
     * 选中菜单.
     * @param val
     */
    handleSelectionChange(val) {
      this.selectedMenus = val
    },
    /**
     * 确认操作.
     */
    handleConfirm() {
      if (this.selectedMenus.length < 1) {
        this.$message.warning(chrome.i18n.getMessage('lunchContentSysMenuConfirmAlert'))
        return
      }
      this.$emit('confirm', this.selectedMenus)
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>